<template>
  <div class="one">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基础信息" name="first">
          <!-- 基础信息 -->
          <el-form ref="form" :inline="true" :model="form" label-width="100px" style="padding:0 300px;">
            <el-form-item label="标题">
              <el-input v-model="form.title" style="width:800px" />
              <el-button type="info" icon="el-icon-search" plain>查看</el-button>
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="form.author" style="width:400px" />
            </el-form-item>
            <el-form-item label="分类">
              <el-select v-model="form.cateid" placeholder="请选择活动区域">
                <el-option v-for="item in list" :key="item.id" :label="item.catename" :value="item.id">{{ item.catename }}</el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="阅读次数">
              <el-input-number v-model="form.click" :min="1" :max="100" label="描述文字" style="width:400px" @change="handleChange" />
            </el-form-item>
            <el-form-item label="创建时间" style="width:400px">
              <el-time-select
                v-model="form.create_date"
                :picker-options="{
                  start: '08:30',
                  step: '00:15',
                  end: '18:30'
                }"
                placeholder="选择时间"
              />
            </el-form-item>
            <el-form-item label="是否推荐">
              <el-radio-group v-model="form.ishot" style="width:400px">
                <el-radio label="否" />
                <el-radio label="是" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="是否置顶">
              <el-radio-group v-model="form.istop" style="width:400px">
                <el-radio label="否" />
                <el-radio label="是" />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="收藏数量">
              <el-input v-model="form.lovenum" style="width:800px;padding-right:400px" />
            </el-form-item>
            <el-form-item label="文章缩略图" style="width:700px">
              <el-upload
                class="upload-demo"
                action="#"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="文章标签">
              <el-checkbox-group v-model="form.tags">
                <el-checkbox label="美食/餐厅线上活动" name="type" />
                <el-checkbox label="地推活动" name="type" />
                <el-checkbox label="线下主题活动" name="type" />
                <el-checkbox label="单纯品牌曝光" name="type" />
              </el-checkbox-group>
            </el-form-item>
            <el-row style="padding-left:300px">
              <el-button type="success" icon="el-icon-plus">立即发布</el-button>
              <el-button type="primary" icon="el-icon-document-checked">保存草稿</el-button>
              <el-button type="warning" icon="el-icon-back">返回列表</el-button>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="SEO信息" name="second">
          <!-- SEO信息 -->
          <el-form ref="form" :inline="true" :model="form" label-width="80px" style="padding:0 300px;">
            <el-form-item label="seo关键字">
              <el-input v-model="form.keywords" type="textarea" style="width:800px" />
            </el-form-item>
            <el-form-item label="seo的描述">
              <el-input v-model="form.description" type="textarea" style="width:800px" />
            </el-form-item>
            <el-row style="padding-left:300px">
              <el-button type="success" icon="el-icon-plus">立即发布</el-button>
              <el-button type="primary" icon="el-icon-document-checked">保存草稿</el-button>
              <el-button type="warning" icon="el-icon-back">返回列表</el-button>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="文章内容" name="third">
          <!-- 文章内容 -->
          <el-form ref="form" :inline="true" :model="form" label-width="80px" style="padding-left:100px">
            <el-form-item label="文章内容">
              <quillEditor v-model="form.content" />
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import { GetPageInfoAPI } from '@/api/aubstance'
export default {
  components: {
    quillEditor
  },
  data() {
    return {
      activeName: 'second',
      form: {
        author: '',
        cateid: '',
        click: '',
        content: '',
        create_date: '',
        description: '',
        ishot: '',
        istop: '',
        keywords: '',
        lovenum: '',
        pic: '',
        status: '2',
        tags: '',
        title: ''
      },
      catename: '',
      page: 1,
      limit: 10,
      list: [],
      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }]
    }
  },
  created() {
    this.userList()
  },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event)
    },
    handleChange(value) {
      // console.log(value)
    },
    // 图片
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    async userList() {
      const res = await GetPageInfoAPI({
        catename: this.catename,
        page: this.page,
        limit: this.limit
      })
      console.log(res)
      this.list = res.data.data
    }
  }
}
</script>

<style scoped>
  .one{
    padding: 50px 20px 0 20px;
  }
</style>
